<template>
  <!-- 请假管理  -->
  <div class="leave">
    <el-tabs
      type="border-card"
      shadow="never"
      style="margin: 0 16px; height: 600px"
      v-model="tabsType"
    >
      <el-tab-pane name="请假">
        <span slot="label"><i class="el-icon-date"></i> 请假 </span>

        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="margin: 20px"
        >
          <el-form-item label="请假类型" prop="vacation_type">
            <!-- <el-radio-group v-model="ruleForm.vacation_type">
              <el-radio v-for="(item,key) in leaveType"  :key="key" :label="key"/>
            </el-radio-group> -->
            <el-select v-model="ruleForm.vacation_type" placeholder="请选择请假类型">
              <el-option
                v-for="(item,key) in leaveType"
                :key="key"
                :label="item"
                :value="key"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请假时间" prop="time">
            <el-date-picker
              v-model="ruleForm.time"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['09:00:00']"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="请假说明" prop="remarks">
            <el-input type="textarea" v-model="ruleForm.remark"></el-input>
          </el-form-item>

          <el-form-item label="审批人" prop="audit_user_id">
            <el-select v-model="ruleForm.audit_user_id" placeholder="请选择">
              <el-option
                v-for="item in auditUserList"
                :key="item.id"
                :label="item.nickname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="请假记录" name="请假记录">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="begin_time" label="开始时间" width="180">
          </el-table-column>
          <el-table-column prop="end_time" label="结束时间" width="180">
          </el-table-column>
          <el-table-column
            prop="vacation_type"
            label="请假类型"
          >
            <template slot-scope="scope" v-if="scope.row.vacation_type">
              <el-tag disable-transitions>{{ leaveType[scope.row.vacation_type] }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="请假事由"> 
            <template slot-scope="scope">
              {{ scope.row.remark?scope.row.remark:'暂无' }}
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="audit_user_nickname"
            label="申请人"
            width="180"
          ></el-table-column> -->
          <el-table-column prop="create_time" label="申请时间" width="180">
          </el-table-column>
          <el-table-column
            prop="status"
            label="审批结果"
            
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === 3 ? 'danger' : scope.row.status === 2 ?'success':'warning'"
                disable-transitions
                >{{ statusType[scope.row.status]}}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="audit_user_nickname" label="审批人"> </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { LeaveType } from "../../constant/enum";
import { audit, auditList,getAuditType,getAuditUserList,getStatusType } from "@/api/leave";
import dayjs from "dayjs";

export default {
  data() {
    return {
      ruleForm: {
        vacation_type: "",
        time: "",
        remarks: "",
        approver: "",
        picture: ""
      },
      queryInfo: {
        page: 1, //当前页
        size: 10, //每页最大数
      },
      rules: {
        vacation_type: [
          { required: true, message: "请选择请假类型", trigger: "change" },
        ],
        audit_user_id: [
          { required: true, message: "请选择审批人", trigger: "change" },
        ],
        time: [
          { required: true, message: "请选择请假时间", trigger: "change" },
        ],
      },
      leaveType: {},
      dialogImageUrl: "",
      dialogVisible: false,
      tabsType: "请假",
      tableData: [],
      auditUserList:[],
      statusType:[]
    };
  },
  mounted() {
    this.getAudit();
    getAuditType().then(res=>{
      this.leaveType = res;
    })
    getAuditUserList().then((res)=>{
        this.auditUserList = res;
        console.log('auditUserList',this.auditUserList)
      })
      getStatusType().then((res)=>{
        this.statusType = res
        console.log('StatusType',this.statusType)
      })
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.tabsType = "销假";
          const params = {
            begin_time: dayjs(this.ruleForm.time[0]).format('YYYY-MM-DD hh:mm:ss'),
            end_time: dayjs(this.ruleForm.time[1]).format('YYYY-MM-DD hh:mm:ss'),
            vacation_type:Number(this.ruleForm.vacation_type),
            remark:this.ruleForm.remark,
            audit_user_id:this.ruleForm.audit_user_id
          }
          audit(params).then((res)=>{
            this.tabsType = "请假记录";
            this.getAudit();
            this.ruleForm={}
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    filterLeaveType(value, row) {
      return row.leaveType === value;
    },
    filterResult(value, row) {
      return row.result === value;
    },

    getAudit(){
      auditList(this.queryInfo).then((res)=>{
        this.tableData = res.data;
      })
      

    }
  },
};
</script>

<style>
.title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  padding: 10px 10px 16px 10px;
  justify-content: space-between;
}
</style>
